<!--
 * @Author: your name
 * @Date: 2021-09-30 16:30:34
 * @LastEditTime: 2021-10-05 12:20:23
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \vue3-demo2\src\m.vue
-->
<template>
<div>
  <div id="box" v-touch:tap="tap"  @click.stop="getCity">
  </div>
  <input type="text" name="city" id="city">
  <ul>
    <li><span>1</span></li>
    <li><span>2</span></li>
    <li><span>3</span></li>
    <li><span>4</span></li>
    <li><span>5</span></li>
    <li><span>6</span></li>
  </ul>
  <div class="title"> flex + rem , this is a long text, this is a long text, this is a long text, this is a long text, this is a long text, this is a long text, this is a long text</div>
  <div class="tip">flexiable.js 分/10份 = 1rem , 工作区设置 设计稿宽度/10, 使用插件转换px=>rem</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core'
import moment from 'dayjs'
import throttle from 'lodash/throttle'
// import { queryAll,query } from './utils/common'
export default defineComponent({
  data() {
    return {
      address: '',
    }
  },
  mounted() {
    console.log("moment ",moment().format())
    console.log(" mounted ");
  },
  methods: {
    getCity: throttle(() => {
        console.log('I get fired every two seconds! ')
      // const ipt = query('#city')
      // ipt.style.fontSize = '30px'
      // console.log('queryAll' , queryAll('#city')[0].value)
      // console.log('query' ,ipt.value)
    }, 2000),
    tap(e) : void {
      console.log(" tag" ,e);

    },
  }
})
</script>

<style scoped lang="scss">
  #box{
    width: 5rem;
    height: 5rem;
    background-color: pink;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    li{
      width: 3.01rem;
      height: 3.01rem;
      margin: 0.16rem;
      text-align: center;
      border-radius: 50%;
      background-color: #fff;
      span{

      }
    }
  }
  .title{
    width: 2rem;
    font-size: 16px;
  }
</style>